import React, { useMemo} from 'react';
import {useState} from 'react';
import ExampleA from './exampleA';
import ExampleB from './exampleB';

export default()=>{
    //未采用useMemo方式，当父组件传递给A、B其中一个子组件的值发生变化时，父组件和两个自组件都会重新进行渲染。
    const [a, setA] = useState('ExampleA');
    const [b, setB] = useState('ExampleB');
    const exampleA=useMemo(()=><ExampleA text={a}/>,[a]);
    const exampleB=useMemo(()=><ExampleB text={b}/>,[b]);
    return(
        <div>
            {/* <ExampleA text={ a } />
+            <ExampleB text={ b } /> */}
            {exampleA}
            {exampleB}  
            <br />
            <button onClick={ () => setA("修改后的"+a) }>修改传给 ExampleA 的属性</button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button onClick={ () => setB("修改后的"+b) }>修改传给 ExampleB 的属性</button>
        </div>
    )
}

// useMemo语法；const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
// 返回一个memoized值。 传递“创建”函数和依赖项数组。
// useMemo只会在其中一个依赖项发生更改时重新计算memoized值。此优化有助于避免在每个渲染上进行昂贵的计算。